import React from 'react'
import { Link, Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
export default class Register extends React.Component {
    static propTypes = {
        error: PropTypes.string,
        makeRegister: PropTypes.func.isRequired,
    }    
    constructor(props){
        super(props);
        this.state = {
            username:'',
            email: '',
            password1: '',
            password2: '',
            activateKey: ''
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleChange(event) {
        this.setState({[event.target.name]: event.target.value})
    }
    handleSubmit(event) {
        if (this.props.shouldActivate)
            this.props.makeActivate({ key: this.state.activateKey })
        else
            this.props.makeRegister({
                username: this.state.username, email: this.state.email,
                password1: this.state.password1, password2: this.state.password2
            })
        event.preventDefault()
    }
    render() {
        if (this.props.activateComplete) {
            return <Redirect to="/login" />
        }
        if (this.props.shouldActivate) {
            return (<div>
                <form onSubmit={this.handleSubmit} name="activate">
                    <div>{this.props.error}</div>
                    <div>
                        <label >activateKey</label>
                        <input type="text" name="activateKey"
                            value={this.state.activateKey}
                            onChange={this.handleChange}
                        />
                    </div>
                    <input type="submit" value="activate"></input>
                </form>
            </div>)
        }
        return (
            <div>
            <form onSubmit={this.handleSubmit} name="register">
                    <div>{this.props.error}</div>
                    <div>
                        <label >username</label>
                        <input type="text" name="username"
                            value={this.state.username}
                            onChange={this.handleChange}
                        />
                    </div>
                <div>
                <label >email</label>
                <input type="email" name="email" 
                value={this.state.email}
                onChange={this.handleChange}
                />
                </div>
                <div>
                <label> password</label>
                        <input type="password" name="password1" 
                value={this.state.password1}
                onChange={this.handleChange}
                />
                </div>
                <div>
                <label> repeat password</label>
                        <input type="password" name="password2" 
                value={this.state.password2}
                onChange={this.handleChange}
                />
                </div>
                <input type="submit" value="register"></input>
            </form>
            <div>Already have an account? <Link to="/login">Login</Link></div> 
            </div> 
        )
        }
}